import Image from "next/image"

export default function NftShowcase() {
  const nfts = [
    {
      id: 1,
      name: "Bera NFT #1",
      image: "https://beraroot.com/assets/nft1-c9e9064c.jpg",
    },
    {
      id: 2,
      name: "Bera NFT #2",
      image: "https://beraroot.com/assets/nft2-c9e9064c.jpg",
    },
    {
      id: 3,
      name: "Bera NFT #3",
      image: "https://beraroot.com/assets/nft3-c9e9064c.jpg",
    },
    {
      id: 4,
      name: "Bera NFT #4",
      image: "https://beraroot.com/assets/nft4-c9e9064c.jpg",
    },
  ]

  return (
    <section id="nft-showcase" className="bg-gradient-to-b from-black to-purple-950 py-24 sm:py-32">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mx-auto max-w-2xl text-center">
          <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">NFT Showcase</h2>
          <p className="mt-6 text-lg leading-8 text-gray-300">
            Explore our exclusive collection of Bera ecosystem NFTs, featuring unique digital assets.
          </p>
        </div>

        <div className="mt-16 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-4">
          {nfts.map((nft) => (
            <div key={nft.id} className="group relative">
              <div className="aspect-square overflow-hidden rounded-lg bg-gray-900">
                <Image
                  src={nft.image || "/placeholder.svg"}
                  alt={nft.name}
                  width={300}
                  height={300}
                  className="h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-105"
                />
              </div>
              <div className="mt-4 flex justify-between">
                <div>
                  <h3 className="text-lg font-semibold text-white">{nft.name}</h3>
                  <p className="mt-1 text-sm text-gray-400">Unique Digital Collectible</p>
                </div>
                <p className="text-lg font-medium text-purple-400">0.5 BERA</p>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-12 text-center">
          <button className="rounded-full bg-gradient-to-r from-purple-600 to-pink-600 px-8 py-3 text-base font-semibold text-white shadow-sm hover:from-purple-700 hover:to-pink-700">
            View All NFTs
          </button>
        </div>
      </div>
    </section>
  )
}
